<template>
  <div>
    <!-- 分类页头部 -->
    <div class="classify-header-container">
      <div class="classify-header-wrapper">
        <input type="text" placeholder="回车搜索商品" />
      </div>
    </div>
    <div class="classify-context-container">
      <div class="classify-context-wrapper">
        <div class="classify-context-left">
          <div
            :class="current===4?'classify-left-item-active':'classify-left-item'"
            @click="allclick"
          >{{leftlist.title}}</div>
          <div
            v-for="(item,index) in sliderleft "
            :key="index"
            :class="current===index?'classify-left-item-active':'classify-left-item'"
            @click="changecurrent(index,item)"
          >{{item.name}}</div>
        </div>
        <div class="classify-context-right">
          <!-- <div class="classify-wrpapper-container">
          <van-swipe  :autoplay="3000" indicator-color="white">
              <van-swipe-item>
                <img src="http://www.usian.net:7002/static/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20191013185236.a853d34.jpg" alt="">
              </van-swipe-item>
              <van-swipe-item>
                <img src="http://www.usian.net:7002/static/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20191013183855.c78e2c4.jpg" alt="">
              </van-swipe-item>
              <van-swipe-item>
                <img src="http://www.usian.net:7002/static/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20191013185220.2acdd0f.jpg" alt="">
              </van-swipe-item>
              <van-swipe-item>
                <img src="http://www.usian.net:7002/static/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20191013185233.2dd6c9c.jpg" alt="">
              </van-swipe-item>
          </van-swipe>
          </div> -->
          <div class="classify-context-right-wrapper">
            <div
              v-for="(item,index) in showcategorylist"
              :key="index"
              class="classify-item-wrapper"
            >
              <div class="classify-item-img">
                <img :src="item.icon" alt />
              </div>
              <div>{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "../css/classify/classify.css";
export default {
  data() {
    return {
      leftlist: { title: "全部分类", type: "all" },
      current: -1
    };
  },
  methods: {
    changecurrent(index, item) {
      this.current = index;
      this.$store.dispatch("changecurrent", item);
    },
    allclick() {
      this.current = 4;
      this.$store.dispatch("allclick");
    }
  },
  mounted() {
    this.$store.dispatch("getCategory");
  },
  computed: {
    showcategorylist: function() {
      return this.$store.state.Classify.showcategorylist;
    },
    sliderleft: function() {
      return this.$store.state.Classify.sliderleft;
    }
  }
};
</script>
<style>
</style>